<template>
     <div element-loading-text="正在获取数据" style="width: 40%;margin: auto;min-width: 600px;padding: 20px 0;">
          <el-descriptions v-loading="!config.chip" title="芯片信息" v-if="config.chip" :column="1" border>
               <ElDescriptionsItem v-for="(item, key) in config.chip" :key="key" :label="key.toString().toUpperCase()">
                    {{ getSize(item) }}
               </ElDescriptionsItem>
          </el-descriptions>
          <br />
          <el-descriptions title="项目信息" :column="1" border>
               <ElDescriptionsItem v-for="(item, key) in project_info" :label="key.toString()">
                    <el-link v-if="item.url" :href="item.url" target="_blank">
                         {{ item.label }}
                         <SvgIcon v-if="item.icon" :icon="item.icon" style="width: 30px; padding-left: 10px;" />
                    </el-link>
                    <span v-else>{{ item.label }}</span>
               </ElDescriptionsItem>
               <ElDescriptionsItem label="文档">
                    <el-row>
                         <el-col v-for="item in doc_url" :span="5">
                              <el-link :href="item.url" target="_blank">
                                   <span>{{ item.label }}</span>
                                   <SvgIcon :icon="item.icon" style="width: 30px; padding-left: 5px;" />
                              </el-link>
                         </el-col>
                    </el-row>
               </ElDescriptionsItem>
          </el-descriptions>
          <br />
          <h2>开发不易, 感谢支持</h2>
          <el-row :gutter="20">
               <el-col :span="12" :offset="6">
                    <el-image :src="zsm" :preview-src-list="srcList" :initial-index="1" fit="cover" />
               </el-col>
          </el-row>
     </div>
</template>

<script setup lang="ts">
import Bus from "~/utils/bus";
import state from "~/utils/store";
import zsm from "~/utils/img";
const config = ref(state)
const srcList = [
     zsm
]

onBeforeMount(() => {
     Bus.emit('push.msg', { api: "get_chip_info" })
});

function getSize(size: any) {
     if (typeof size !== 'number')
          return size.toUpperCase()
     if (size < 1024) {
          return size
     } else if (size < 1024 * 1024) {
          return (size / 1024).toFixed(2) + 'KB'
     } else if (size < 1024 * 1024 * 1024) {
          return (size / 1024 / 1024).toFixed(2) + 'MB'
     } else {
          return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB'
     }
}
interface projectInfo {
     [key: string]: {
          label: string,
          url?: string,
          icon?: string
     }
}
const project_info: projectInfo = {
     开发者: {
          label: 'maplerian'
     },
     开源协议: {
          label: 'Apache 2.0'
     },
     Github: {
          url: 'https://github.com/maplerian/wireless_tools',
          icon: 'github',
          label: 'Wireless Toolbox'
     },
     Gitee: {
          url: 'https://gitee.com/maplerian/wireless-toolbox',
          icon: 'gitee',
          label: '无线工具箱'
     },
     开源固件: {
          url: 'https://gitee.com/maplerian/wireless-toolbox---esp-idf',
          icon: 'gitee',
          label: 'esp-idf'
     },
}
const doc_url = [
     // {
     //      url: 'https://maplerian.gitub.io/wireless_tools.doc',
     //      icon: 'github',
     //      label: 'Github'
     // },
     {
          url: 'https://gitee.com/maplerian/wireless-toolbox/wikis/pages',
          icon: 'gitee',
          label: 'Gitee'
     },
     // {
     //      url: 'https://yuque.com/maplerian/wireless_tools',
     //      icon: 'yuque',
     //      label: '语雀'
     // }
]
</script>

<style scoped></style>